<template>
	<view class="container">
		<view v-if="commissionList.length === 0" class="nav-commission" @tap="navUserShare">
			<text>暂无佣金，点击前往获得</text>
		</view>
		<view class="commission-list">
			<view v-for="(commission, index) in commissionList" :key="index" class="commission-item">
				<view class="user-wrapper">
					<view class="nickname">{{ commission.nickname }}</view>
					<view class="obtain-time">{{ commission.obtainTime }}</view>
				</view>
				<view class="price-wrapper">
					<view class="price">
						<text>实付款：</text>
						<text>{{ commission.payPrice.toFixed(2) }}</text>
					</view>
					<view class="price commission">
						<text>佣金：</text>
						<text>{{ commission.commission.toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { listUserCommission } from '@/api/user.js';
export default {
	onShow() {
		this.getCommission();
	},
	data() {
		return {
			commissionList: []
		};
	},
	methods: {
		navUserShare() {
			uni.redirectTo({
				url: '/pages/user/service/user_share/user_share'
			});
		},
		getCommission() {
			listUserCommission().then((res) => {
				this.commissionList = res.data;
				this.commissionList.sort((a, b) => {
					console.log(a.obtainTime, b.obtainTime, a.obtainTime <= b.obtainTime);
					return a.obtainTime <= b.obtainTime ? 1 : -1;
				});
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;
.nav-commission {
	padding: 20rpx;
	padding-top: 40rpx;
	text-align: center;
	color: @theme-color;
}
.commission-list {
	display: flex;
	flex-direction: column;
	row-gap: 10rpx;
	margin-top: 10rpx;
}
.commission-item {
	display: flex;
	justify-content: space-between;
	padding: 15rpx 20rpx;
	background-color: #fff;
}
.user-wrapper,
.price-wrapper {
	display: flex;
	flex-direction: column;
	row-gap: 10rpx;

	.nickname {
		font-size: 30rpx;
	}

	.obtain-time {
		font-size: 25rpx;
		color: #999999;
	}

	.price {
		font-size: 28rpx;
		text-align: right;
	}
	.commission {
		color: @theme-color;
	}
}
</style>
